import React from 'react';
import {
    View,
    Text,
    Navigator,
    TouchableOpacity,
    FlatList,
    Slider,
    ToastAndroid,
    ActivityIndicator,
    WebView
} from 'react-native';

import SecondPageComponent from '../secondComponent/SecondPageComponent';

export default class FourPageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          fist:1
        };
    }
    componentDidMount() {
      // alert(this.props.name);

    }
    childMethod() {
      const { navigator } = this.props;
      //为什么这里可以取得 props.navigator?请看上文:
      //<Component {...route.params} navigator={navigator} />
      //这里传递了navigator作为props
      if(navigator) {
          navigator.push({
              name: 'SecondPageComponent',
              component: SecondPageComponent,
          })
      }
    }
    _pressButton() {
        const { navigator } = this.props;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
            })
        }
    }
    render() {
        let { position } = this.props;
        return (
            <View>
              <FlatList
                style={{height:100}}
                data={[
                  {key: 'a'}, {key: 'b'},
                  {key: 'a1'}, {key: 'b1'},
                  {key: 'a2'}, {key: 'b2'},
                  {key: 'a3'}, {key: 'b3'},
                  {key: 'a4'}, {key: 'b4'},
                  {key: 'a5'}, {key: 'b5'},
                  {key: 'a6'}, {key: 'b6'},
                  {key: 'a7'}, {key: 'b7'},
                  {key: 'a8'}, {key: 'b8'}
                ]}
                renderItem={({item}) => <Text>{item.key}</Text>}
                />
              <Slider onSlidingComplete={()=>ToastAndroid.show('滑动结束', ToastAndroid.SHORT)} />
              <ActivityIndicator
                size="large"
              />
            </View>
        );
    }
}
